<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        select {
            width: 100px;
        }
    </style>
</head>
<body>
<script>
    let province = [
        {
            pid: "p01",
            pname: "江苏省",
            citys: [
                {
                    cid: "c01",
                    cname: "南京"
                },
                {
                    cid: "c02",
                    cname: "苏州"
                },
                {
                    cid: "c03",
                    cname: "无锡"
                }
            ]
        },
        {
            pid: "p02",
            pname: "安徽省",
            citys: [
                {
                    cid: "c04",
                    cname: "马鞍山"
                },
                {
                    cid: "c05",
                    cname: "芜湖"
                },
                {
                    cid: "c06",
                    cname: "滁州"
                }
            ]
        }
    ]

    //要求在页面中生成2个下拉列表，一个用于显示省份，一个用于显示城市。选择省份，城市发生变化. select标签的onchange
    let provinceSelect = document.createElement("select");
    document.body.appendChild(provinceSelect);

    let citySelect = document.createElement("select");
    document.body.appendChild(citySelect);

    for (let i = 0; i < province.length; i++) {
        let p = province[i];
        let opt = document.createElement("option");
        opt.value = p.pid;
        opt.innerText = p.pname;
        provinceSelect.appendChild(opt);

    }


    provinceSelect.addEventListener("change", updateCity)

    function updateCity() {
        citySelect.innerHTML = "";
        let a = this.value;
        for (let i = 0; i < province.length; i++) {
            if (province[i].pid === a) {
                for (let k = 0; k < province[i].citys.length; k++) {
                    let c = province[i].citys[k];
                    let opt2 = document.createElement("option");
                    opt2.value = c.cid;
                    opt2.innerText = c.cname;
                    citySelect.appendChild(opt2);
                }
            }
        }
    }


    provinceSelect.value = province[0].pid;
    updateCity.call(provinceSelect);

</script>
</body>
</html>